<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="jquery/jquery-3.3.1.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <title></title>
    <style>
        .test {
            height: 300px;
            background-color: red;
        }

    </style>
</head>
<body>
<!--
栅格：bootstrap将设备窗口平均分成12等份
col 代表行
lg 代表大屏 窗口 width >= 1200px          col-lg-3 当处于大屏的时候，宽度占3/12
md 代表中屏 窗口 992px <= width < 1200px  col-md-4 当处于中屏的时候，宽度占6/12
sm 代表小屏 窗口 768px <= width < 992px   col-sm-1 当处于小屏的时候，宽度占1/12
xs 代表手机 窗口 width < 768px            col-xs-10 当处于手机的时候，宽度占10/12

-->
    <div class="test col-lg-3 col-md-6 col-sm-1 col-xs-10">
    </div>
</body>
</html>